<template>
  <div class="url-tool">
    <h2>URL 编码/解码工具</h2>
    <div class="input-group">
      <label for="inputText">输入文本：</label>
      <textarea id="inputText" v-model="inputText" rows="4" placeholder="请输入需要编码或解码的文本"></textarea>
    </div>
    <div class="btn-group">
      <button @click="encodeURL">URL 编码</button>
      <button @click="decodeURL">URL 解码</button>
    </div>
    <div class="result" v-if="result">
      <h3>结果：</h3>
      <textarea v-model="result" rows="4" readonly></textarea>
    </div>
  </div>
</template>

<script>
export default {
  name: "UrlTool",
  data() {
    return {
      inputText: "",
      result: ""
    };
  },
  methods: {
    encodeURL() {
      this.result = encodeURIComponent(this.inputText);
    },
    decodeURL() {
      try {
        this.result = decodeURIComponent(this.inputText);
      } catch (error) {
        this.result = "解码错误：" + error.message;
      }
    }
  }
};
</script>

<style scoped>
.url-tool {
  max-width: 600px;
  margin: 20px auto;
  padding: 10px;
}
.input-group {
  margin: 10px 0;
}
.input-group label {
  display: block;
  margin-bottom: 5px;
}
.input-group textarea {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
.btn-group {
  margin-top: 10px;
}
.btn-group button {
  margin-right: 10px;
  padding: 8px 16px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.btn-group button:hover {
  background-color: #2980b9;
}
.result {
  margin-top: 20px;
}
.result textarea {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
</style> 